<%@ page language="java" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>



<title>${goods.name}_蜗牛嗨购商城</title>
<%--    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/index.css"/>--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">

</script>
<script type="text/javascript">

    $(function () {
        $("#add").on("click", function () {
            $("#buyNums").val(parseInt($("#buyNums").val()) + 1);
        });
        $("#reduce").on("click", function () {
            if ($("#buyNums").val() == 1) {
                return;
            }
            $("#buyNums").val(parseInt($("#buyNums").val()) - 1);
        });

    });
    $(function(){
        $('.mycart').hover(
            function(){
                $('#div_mycart').show('slow');
            },
            function(){
                $('#div_mycart').hide('slow');
            }
        );
    });
    $(function() {
        $('.allsort').hover(function() {
            $('#div_allsort').show();
        }, function() {
            $('#div_allsort').hide();
        });
    });

    function joinCart(id) {
        var num = $("#buyNums").val();
        var price = parseFloat($("#real_price").text().replace("￥", ""));
        var totalPrice = price * num;
        $.ajax({
            type: "GET",
            url: "${pageContext.request.contextPath}/cart/add",
            data: {id: id, num: num, price: totalPrice},
            success: function (data) {
                if (data.success) {
                    // 更新页面上的购物车数量显示
                    $("b[name='mycart_count']").text(data.count);
                    alert("加入购物车成功");
                } else {
                    alert("加入购物车失败，请先登录");
                }
            },
            error: function () {
                alert("加入购物车请求失败");
            }
        });
    }
    // 获取购物车商品数量
    function getCartCount() {
        $.ajax({
            url: "${pageContext.request.contextPath}/cart/getCount",
            type: "GET",
            success: function(data) {
                if(data.success) {
                    // 更新页面上的购物车数量显示
                    $("b[name='mycart_count']").text(data.count);
                }
            },
            error: function() {
                console.log("获取购物车数量失败");
            }
        });
    }

    // 页面加载时调用一次
    $(document).ready(function() {
        getCartCount();
    });

    function order_add() {
        location.href = "${pageContext.request.contextPath}/order/order_add?goodId=${goods.id}&count="+$("#buyNums").val();
    }

</script>



<div class="container">

    <div class="navbar">
        <ul>
            <%--            <li><a href="shop/index">首页</a></li>--%>
            <li>
                <a onclick="setTimeout(()=>{window.close()},500)">
                    首页
                </a>
            </li>
        </ul>
        <div class="mycart">
            <dl>
                <dt>
                    <a href="/shop/cart/show">购物车<b name="mycart_count">0</b>件</a>
                </dt>
                <dd>
                    <a href="${pageContext.request.contextPath}/cart/show">去结算</a>
                </dd>
            </dl>



        </div>
    </div>

    <div class="wrapper clearfix">
        <div class="summary">
            <h2>${goods.name}</h2>
            <!--基本信息区域-->
            <ul>
                <li><span class="f_r light_gray">商品编号：<label
                        id="data_goodsNo">${goods.no}</label></span></li>
                <li id="priceLi">销售价：<b class="red2"><span
                        id="real_price">￥${goods.salePrice}</span></b></li>
                <li>市场价：<s id="data_marketPrice">￥${goods.marketPrice}</s>
                </li>
                <li>库存：现货<span>(<label id="data_storeNums">${goods.stock}</label>)
					</span></li>
            </ul>
            <div class="current">
                <dl class="m_10 clearfix">
                    <dt>购买数量：</dt>
                    <dd>
                        <input class="gray_t f_l" type="text" id="buyNums" value="1"
                               maxlength="5"/>
                        <div class="resize">
                            <a class="add" id="add" > + </a>

                            <a class="reduce" id="reduce" > - </a>
                        </div>
                    </dd>
                </dl>
                <input class="submit_buy" type="button" id="buyNowButton"
                       value="立即购买" onclick="order_add()"/>
                <div class="shop_cart" style="z-index:1">
                    <input class="submit_join" type="button" id="joinCarButton"
                           onclick="joinCart(${goods.id});" value="加入购物车"/>

                    <div class="shopping" id="product_myCart" style='display:none'>
                        <dl class="cart_stats">
                            <dt class="gray f14 bold">
                                <a class="close_2 f_r" href="javascript:closeCartDiv();"
                                   title="关闭">关闭</a> <img src="${pageContext.request.contextPath}/static/images/front/right_s.gif"
                                                              width="24" height="24" alt=""/>成功加入购物车
                            </dt>
                            <dd class="gray">
                                目前选购商品共<b class="orange" name='mycart_count'></b>件<span>合计：<b
                                    name='mycart_sum'></b></span>
                            </dd>
                            <dd>
                                <a class="btn_blue bold" href="">进入购物车</a><a
                                    class="btn_blue bold" href="javascript:void(0)"
                                    onclick="closeCartDiv();">继续购物>></a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>

        </div>

        <!--图片放大镜-->
        <div>
            <div class="pic_show"
                 style="width:435px;height:435px;position:relative;z-index:5;padding-bottom:5px;">
                <img src="${goods.image}" title="${goods.name}"
                     style="border:none;width:435px;height:435px"/>
            </div>
        </div>
    </div>

    <div class="wrapper clearfix container_2">
        <!--左边栏-->
        <div class="sidebar f_l">
            <div class="box m_10">
                <div class="title">热卖商品</div>
                <div class="content">
                    <ul class="ranklist">

                    </ul>
                </div>
            </div>
        </div>

        <!--滑动面tab标签-->
        <div class="main f_r" style="overflow:hidden">
            <div class="uc_title" name="showButton">
                <label class="current"><span>商品详情</span></label>
            </div>
            <div name="showBox">
                <!-- 商品详情 start -->
                <div>${goods.description}</div>
                <!-- 商品详情 end -->
            </div>
        </div>
    </div>

</div>

<style>
    /* 基础重置 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Helvetica Neue', system-ui, sans-serif;
    }

    /* 容器布局 */
    .container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 20px;
        background: #f8fafc;
    }

    /* 导航栏 */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .navbar ul {
        display: flex;
        gap: 2rem;
        list-style: none;
    }

    .navbar a {
        color: #475569;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s;
    }

    .navbar a:hover {
        color: #3b82f6;
    }

    /* 主内容区域 */
    .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin: 2rem 0;
    }

    /* 商品图片 */
    .pic_show {
        background: white;
        border-radius: 1rem;
        padding: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.05);
        position: relative;
    }

    .pic_show img {
        width: 100%;
        height: 500px;
        object-fit: contain;
        border-radius: 0.5rem;
        transition: transform 0.3s;
    }

    /* 商品信息 */
    .summary {
        padding: 1.5rem;
        background: white;
        border-radius: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.05);
    }

    .summary h2 {
        font-size: 1.75rem;
        color: #1e293b;
        margin-bottom: 1rem;
    }

    .summary ul {
        list-style: none;
        margin: 1.5rem 0;
    }

    .summary li {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.95rem;
    }

    .red2 {
        color: #ef4444;
        font-size: 1.5rem;
        font-weight: 700;
    }

    #data_marketPrice {
        color: #64748b;
        font-size: 0.9rem;
    }

    /* 购买操作区 */
    .current {
        margin-top: 2rem;
    }

    .m_10 {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin: 1.5rem 0;
    }

    .gray_t {
        width: 80px;
        padding: 0.75rem;
        border: 1px solid #cbd5e1;
        border-radius: 0.5rem;
        text-align: center;
    }

    .resize {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .add, .reduce {
        width: 32px;
        height: 32px;
        background: #f1f5f9;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.3s;
    }

    .add:hover, .reduce:hover {
        background: #e2e8f0;
    }

    /* 按钮样式 */
    .submit_buy, .submit_join {
        width: 100%;
        padding: 1rem;
        border: none;
        border-radius: 0.75rem;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .submit_buy {
        background: #ef4444;
        color: white;
        margin-bottom: 1rem;
    }

    .submit_join {
        background: #3b82f6;
        color: white;
    }

    .submit_buy:hover, .submit_join:hover {
        transform: translateY(-2px);
    }

    /* 侧边栏 */
    .sidebar {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.05);
        padding: 1rem;
    }

    .title {
        font-size: 1.25rem;
        color: #1e293b;
        padding-bottom: 1rem;
        border-bottom: 2px solid #e2e8f0;
        margin-bottom: 1rem;
    }

    .ranklist {
        display: grid;
        gap: 1rem;
    }

    .ranklist li {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: #f8fafc;
        border-radius: 0.75rem;
        transition: transform 0.3s;
    }

    .ranklist li:hover {
        transform: translateX(8px);
    }

    /* 商品详情 */
    .uc_title {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .uc_title label {
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: background 0.3s;
    }

    .uc_title .current {
        background: #3b82f6;
        color: white;
    }

    /* 响应式设计 */
    @media (max-width: 1024px) {
        .wrapper {
            grid-template-columns: 1fr;
        }

        .pic_show img {
            height: 400px;
        }
    }

    @media (max-width: 768px) {
        .gray_t {
            width: 60px;
        }

        .m_10 {
            flex-direction: column;
            align-items: flex-start;
        }

        .submit_buy, .submit_join {
            padding: 0.75rem;
            font-size: 0.9rem;
        }
    }

    /* 动画效果 */
    @keyframes cartBounce {
        0% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
        100% { transform: translateY(0); }
    }

    #product_myCart {
        animation: cartBounce 0.6s ease;
        position: fixed;
        top: 20px;
        right: 20px;
        background: white;
        padding: 1.5rem;
        border-radius: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.1);
        z-index: 1000;
    }
</style>